<template>
  <div id="app">
    <vuedraggable class="wrapper" v-model="userInfo" @start="drag=true" @end="drag=false">
        <transition-group>
          <div v-for="item in userInfo" :key="item.id" class="item">
            <div class="item1">
              <p>{{item.name}}</p>
              <p>商品数量: {{item.num}}</p>
            </div>
            <div class="item2">
              <i class="iconfont icon-shangchuan" @click="updata(item,$event)"></i>
              <i class="iconfont icon-xiayi"></i>
            </div>
          </div>
        </transition-group>
    </vuedraggable>
  </div>
</template>

<script>
import {getDemoList} from "./api/index"
import vuedraggable from 'vuedraggable';
export default {
  name: 'App',
  components: {
    vuedraggable
  },
  data(){
    return {
      userInfo:[]
    }
  },
  methods:{
    updata(val,e){
      console.log(val,e)
    }
  },
  async mounted(){
      const {userInfo} = await getDemoList()
      console.log(userInfo)
      this.userInfo = userInfo
  }
}
</script>

<style>
  #app{
    background-color: rgb(199, 217, 223);
    padding:10px;
  }
  .item{
    margin: 20px;
    background-color: white;
    transition: 1s all;
  }
  .item1{
    display:flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(224, 223, 223);
    align-items: center;
    font-size: 14px;
    height:40px
  }
  .item1 p{
    margin: 0px 10px;
  }
  .item2{
    height:40px;
    display:flex;
    justify-content: flex-end;
    align-items: center;
  }
  .item i {
    margin: 0 10px;
  }
</style>
